let layer = layui.layer
let form = layui.form




// =============================编辑按钮获取文章分类===========================
let id=location.search.split(`?id=`)[1]
axios.get(`/my/article/cates`).then(({data:{data}})=>{
    // console.log(res)
    let newArr=data.map(item=>{
        return`
        <option value="${item.Id}">${item.name}</option>
        `
      }).join(``)
      $(`[name="cate_id"]`).append(newArr)
      form.render('select'); //刷新select选择框渲染
})


// =========================富文本编辑器=======================
const E = window.wangEditor
const editor = new E("#contentBox")
//增加层级
editor.config.zIndex = 1
editor.create()
//=========================决定文章的发布还是草稿=================================
let state
$(`#btnPublish`).on(`click`,function () {
  state=`已发布`
})
$(`#btnSave`).on(`click`,function () {
  state=`存为草稿`
})


//=========================图片裁切=================================


// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 400/280,
  preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);

//

$(`#btnChooseCoverImage`).on(`click`,function () {
  $(`#fileCover`).click()
})


$(`#fileCover`).on(`change`, function () {
  // 找到用户选择的文件（文件对象）
   let file = this.files[0]
   console.log(this.files)
   if (!file) {
    return layer.msg(`请选择文件`)
   }
 //根据选择的文件，为文件对象创建一个对应的url 地址，用于访问被选择的图片
   let imgSrc = URL.createObjectURL(file)

   $image
     .cropper('destroy')      // 销毁旧的裁剪区域
     .attr('src', imgSrc)  // 重新设置图片路径
     .cropper(options)        // 重新初始化裁剪区域

 })

$(`#form`).on(`submit`,function (e) {
  e.preventDefault()
  //使用的是FormDate()
  let fd=new FormData(this)
  fd.append(`content`,editor.txt.html())

  fd.append(`state`,state)


  $image
  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
  })
  .toBlob(function(blob) {       
    // 将 Canvas 画布上的内容，转化为文件对象
      // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
      //使用fd的append方法来追加blob数据
      fd.append(`cover_img`,blob)

     axios.post(`/my/article/add`,fd).then(({data:{status,message}})=>{
       if (status!==0) {
         return layer.msg(`发布失败`)
       }
       layer.msg(
        `发布成功`,
        {
          time:500
        },
        function () {
          location.href=`/article/art_list.html`
        }
       )
   })
      // fd.forEach((value,name)=>console.log(value,name))
 
    })
})


